<template>
	<el-card>
		<h2>{{ title }}</h2>
		<div id="staff_transferc" style="width: 100%; height: 40vh"></div>
	</el-card>
</template>

<style scoped></style>

<script setup lang="ts" name="profileStaffTransfercIndex">
import * as echarts from 'echarts'
const title = '调动类型'
const option = {
	tooltip: {
		trigger: 'item'
	},
	legend: {
		top: '90%',
		left: 'center'
	},
	series: [
		{
			name: title,
			type: 'pie',
			radius: ['40%', '70%'],
			avoidLabelOverlap: false,
			itemStyle: {
				borderRadius: 10,
				borderColor: '#fff',
				borderWidth: 2
			},
			label: {
				normal: {
					show: true,
					position: 'center',
					textStyle: {
						fontSize: 16,
						padding: [-100, 0, 0, 0]
					},
					formatter: (params: any) => {
						console.info('params', params)
						return '调动总次数\n400'
					}
				},
				show: false,
				position: 'center'
			},
			emphasis: {
				label: {
					// show: true,
					// formatter: ['{b}', '({c})'].join('\n'),
					// fontSize: '14',
					// padding: [20, 0, 0, 0],
					// fontWeight: 'bold'
				}
			},
			labelLine: {
				show: false
			},
			data: [
				{ value: 100, name: '调岗' },
				{ value: 240, name: '晋升' },
				{ value: 120, name: '降级' }
			]
		}
	]
}

setTimeout(function () {
	const chart = echarts.init(document.getElementById('staff_transferc'))
	chart.setOption(option)
}, 500)
</script>
